<style scoped lang="stylus" type="text/stylus">
  @import 'noticeInfo.styl';
</style>

<template>
  <div id="NoticeInfo">
    <header>
      <div class="noticeInfoNav">
        <ul class="noticeNav">
          <li class="routerLink">
            <router-link to="/platformManagement/notification">通知</router-link>
          </li>
          <li>/</li>
          <li class="noticeTitleInfo"><span v-if="targetNotice.type==0">查看阅读通知</span><span v-if="targetNotice.type==1">查看会议通知</span><span>:{{targetNotice.title}}</span>
          </li>
        </ul>
        <!-- <ul class="loginBtn">
          <li>运维管理员  </li>
          <li><i class="logout iconfont icon-tuichu"></i></li>
        </ul> -->
      </div>
      <div class="noticeLeft">
        <div class="noticeLeft01"><span>发布时间</span>{{targetNotice.subDateText}}</div>
        <div class="noticeLeft02"><span>限定企业回应期限</span>{{targetNotice.endDateText}}<span class="endDayTextStyle"> ( {{targetNotice.endDayText}} 天)</span>
        </div>
        <div v-show="targetNotice.type == 1" class="noticeLeft03">
          <span>会议时间时间</span>
          {{targetNotice.meetDateText}}
          <span class="subDateTextStyle">
                ( {{targetNotice.meetDayText}} 天)
              </span>
        </div>
      </div>
    </header>
    <div class="content contentBackgroundColor1">
      <div class="contentNav">
        <div class="navCenter">
          <div :class="{'noticeContent':noticeContent}" @click="showNoticeContent">通知内容</div>
          <div :class="{'reception':reception}" @click="showReceive">企业接收情况</div>
        </div>
      </div>
      <VuePerfectScrollbar class="noticeContentscrollbar">
        <ul class="noticeContentInfo" v-show="isShowNoticeContent">
          <li>
            <div>
              <div class="subhead">
                <span>已通知&nbsp;<span class="textStyle">{{companysCount.countOrg}}</span>&nbsp;家企业</span>
                <ul class="subheadList">
                  <li class="subheadListInfo" v-for="item in companysList" :key="item.id">{{item.name}}，</li>
                </ul>
              </div>
              <div class="mainContent">
                <code class="contentInfo" v-html="targetNotice.content"></code>
              </div>
            </div>
          </li>
        </ul>
      </VuePerfectScrollbar>

      <div class="receiveInfo" v-show="isShowReceive">
        <ul v-show="targetNotice.type == 1" class="receiveInfoMeeting">
          <li @click="getReceptionSituation01" :class='{activeStyle:choose1}'>
            <ul>
              <li>{{CompanysReceiveNotice.attendPer}}%</li>
              <li>{{CompanysReceiveNotice.attendCount}}个企业- 及时确认参加</li>
            </ul>
          </li>
          <li @click="getReceptionSituation02" :class='{activeStyle:choose2}'>
            <ul>
              <li>{{CompanysReceiveNotice.notAttendPer}}%</li>
              <li>{{CompanysReceiveNotice.notAttenCount}}个企业- 拒绝参加</li>
            </ul>
          </li>
          <li @click="getReceptionSituation03" :class='{activeStyle:choose3}'>
            <ul>
              <li>{{CompanysReceiveNotice.readPer}}%</li>
              <li>{{CompanysReceiveNotice.readCount}}个企业- 已阅但未回应</li>
            </ul>
          </li>
          <li @click="getReceptionSituation04" :class='{activeStyle:choose4}'>
            <ul>
              <li>{{CompanysReceiveNotice.notReadPer}}%</li>
              <li>{{CompanysReceiveNotice.notReadCount}}个企业- 未阅读通知</li>
            </ul>
          </li>
        </ul>
        <ul v-show="targetNotice.type == 0" class="receiveInfoRead">
          <li @click="getReceptionSituation05" :class='{activeStyle:choose5}'>
            <ul>
              <li>{{CompanysReceiveNotice.readPer}}%</li>
              <li>{{CompanysReceiveNotice.readCount}}个企业- 已阅但未回应</li>
            </ul>
          </li>
          <li @click="getReceptionSituation06" :class='{activeStyle:choose6}'>
            <ul>
              <li>{{CompanysReceiveNotice.notReadPer}}%</li>
              <li>{{CompanysReceiveNotice.notReadCount}}个企业- 未阅读通知</li>
            </ul>
          </li>
        </ul>
        <VuePerfectScrollbar class="enterpriseScrollbar">
          <ul class="enterprise">
            <li v-for="(item,index) in ReceptionSituationList" :key="index">
              <ul class="enterpriseInfo">
                <li><i></i></li>
                <li><p>{{item.orgName}}</p></li>
                <li><span v-if="isNotShowContent">{{item.content}}</span></li>
                <li>
                  <ul v-if="isNotShow">
                    <li>{{item.userName}}</li>
                    <li>|</li>
                    <li>{{item.userPhone}}</li>
                  </ul>
                </li>
                <li><b>{{item.dateText}}</b></li>
              </ul>
            </li>
          </ul>
        </VuePerfectScrollbar>
      </div>
      <div class="revocationBtn" v-show="isContentShow">
        <span @click="revocationNotice">撤回通知</span>
      </div>
    </div>
  </div>
</template>

<script>
  import $ from "jquery";
  import common from "../../../common/common";

  export default {
    name   : "NoticeInfo",
    data() {
      return {
        isShowNoticeContent   : true,
        isShowReceive         : false,
        noticeFlag            : "ALL",
        noticeContent         : true,
        reception             : false,
        targetNotice          : {},
        targetCompanys        : {},
        CompanysReceiveNotice : {},
        companysList          : [],
        isContentShow         : true,
        isShow                : true,
        ReceptionSituationList: {},
        ReceptionSituation    : {},
        choose1               : false,
        choose2               : false,
        choose3               : false,
        choose4               : false,
        choose5               : false,
        choose6               : false,
        isNotShow             : false,
        isNotShowContent      : false,
        companysCount         : {}
      };
    },
    created() {
      this.getAllNotice();
      this.getCompanysInfo();
    },
    mounted() {
      // let xxxx = document.querySelector("#xxxx");
      // xxxx.innerHeight = xxxx.scrollHeight;
      // this.getAllNotice();
    },
    methods: {
      showNoticeContent() {
        this.isShowNoticeContent = true;
        this.isShowReceive       = false;
        this.noticeContent       = true;
        this.reception           = false;
        this.isContentShow       = true;
      },
      showReceive() {
        this.isShowNoticeContent = false;
        this.isShowReceive       = true;
        this.noticeContent       = false;
        this.reception           = true;
        this.isContentShow       = false;
        const itemId             = this.$route.params.itemId;
        const url                = `${common.apihost}notice/findReceptionSituation`;
        this.$http
          .post(url, {id: itemId}, {emulateJSON: true})
          .then(response => {
            this.CompanysReceiveNotice = response.body.result[0];
          });
      },
      getAllNotice() {
        this.choose1 = true;
        this.choose5 = true;
        const itemId = this.$route.params.itemId;
        const url    = `${common.apihost}notice/findNoticeDetailsForGov`;
        this.$http
          .post(url, {id: itemId}, {emulateJSON: true})
          .then(response => {
            this.targetNotice = response.body.result;
            this.getReceptionSituation01();
          });
      },
      getCompanysInfo() {
        const itemId = this.$route.params.itemId;
        const url    = `${common.apihost}notice/findOtherGroupByNoticeId`;
        this.$http
          .post(url, {id: itemId}, {emulateJSON: true})
          .then(response => {
            this.targetCompanys = response.body.result[0].orgList[0];
            this.companysList   = response.body.result[0].orgList;
            this.companysCount  = response.body.result[0];
          });
      },
      revocationNotice() {
        const itemId = this.$route.params.itemId;
        const url    = `${common.apihost}notice/withdrawNotice`;
        this.$http
          .post(url, {id: itemId}, {emulateJSON: true})
          .then(response => {
            this.$Message.success("通知已经撤回！");
            this.$router.push({path: "/platformManagement/notification"});
          });
      },
      getReceptionSituation01() {
        this.choose1          = true;
        this.choose2          = false;
        this.choose3          = false;
        this.choose4          = false;
        this.choose5          = true;
        this.choose6          = false;
        this.isShow           = true;
        this.isNotShow        = true;
        this.isNotShowContent = true;
        const itemId          = this.$route.params.itemId;
        const receptionFlag   = 1;
        const url             = `${common.apihost}notice/findReceptionSituationList`;
        this.$http
          .post(
            url,
            {id: itemId, receptionFlag: receptionFlag},
            {emulateJSON: true}
          )
          .then(response => {
            // this.ReceptionSituation = response.body.result[0].orgList[0];
            this.ReceptionSituationList = response.body.result;
          });
      },
      getReceptionSituation02() {
        this.choose1          = false;
        this.choose2          = true;
        this.choose3          = false;
        this.choose4          = false;
        this.choose5          = true;
        this.choose6          = false;
        this.isNotShow        = false;
        this.isNotShowContent = true;
        const itemId          = this.$route.params.itemId;
        const receptionFlag   = 2;
        const url             = `${common.apihost}notice/findReceptionSituationList`;
        this.$http
          .post(
            url,
            {id: itemId, receptionFlag: receptionFlag},
            {emulateJSON: true}
          )
          .then(response => {
            // this.ReceptionSituation = response.body.result[0].orgList[0];
            this.ReceptionSituationList = response.body.result;
            this.ReceptionSituation     = response.body.result[0];
          });
      },
      getReceptionSituation03() {
        this.choose1          = false;
        this.choose2          = false;
        this.choose3          = true;
        this.choose4          = false;
        this.choose5          = true;
        this.choose6          = false;
        this.isNotShow        = false;
        this.isNotShowContent = false;
        const itemId          = this.$route.params.itemId;
        const receptionFlag   = 3;
        const url             = `${common.apihost}notice/findReceptionSituationList`;
        this.$http
          .post(
            url,
            {id: itemId, receptionFlag: receptionFlag},
            {emulateJSON: true}
          )
          .then(response => {
            // this.ReceptionSituation = response.body.result[0].orgList[0];
            this.ReceptionSituationList = response.body.result;
          });
      },
      getReceptionSituation04() {
        this.choose1          = false;
        this.choose2          = false;
        this.choose3          = false;
        this.choose4          = true;
        this.choose5          = true;
        this.choose6          = false;
        this.isNotShow        = false;
        this.isNotShowContent = false;
        const itemId          = this.$route.params.itemId;
        const receptionFlag   = 4;
        const url             = `${common.apihost}notice/findReceptionSituationList`;
        this.$http
          .post(
            url,
            {id: itemId, receptionFlag: receptionFlag},
            {emulateJSON: true}
          )
          .then(response => {
            // this.ReceptionSituation = response.body.result[0].orgList[0];
            this.ReceptionSituationList = response.body.result;
          });
      },
      getReceptionSituation05() {
        this.choose1          = true;
        this.choose2          = false;
        this.choose3          = false;
        this.choose4          = false;
        this.choose5          = true;
        this.choose6          = false;
        this.isNotShow        = false;
        this.isNotShowContent = true;
        const itemId          = this.$route.params.itemId;
        const receptionFlag   = 5;
        const url             = `${common.apihost}notice/findReceptionSituationList`;
        this.$http
          .post(
            url,
            {id: itemId, receptionFlag: receptionFlag},
            {emulateJSON: true}
          )
          .then(response => {
            // this.ReceptionSituation = response.body.result[0].orgList[0];
            this.ReceptionSituationList = response.body.result;
          });
      },
      getReceptionSituation06() {
        this.choose1          = true;
        this.choose2          = false;
        this.choose3          = false;
        this.choose4          = false;
        this.choose5          = false;
        this.choose6          = true;
        this.isNotShow        = false;
        this.isNotShowContent = false;
        const itemId          = this.$route.params.itemId;
        const receptionFlag   = 4;
        const url             = `${common.apihost}notice/findReceptionSituationList`;
        this.$http
          .post(
            url,
            {id: itemId, receptionFlag: receptionFlag},
            {emulateJSON: true}
          )
          .then(response => {
            // this.ReceptionSituation = response.body.result[0].orgList[0];
            this.ReceptionSituationList = response.body.result;
          });
      }
    },
  };
</script>
